import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'
import request from './utils/request'
import storage from './utils/storage'
import api from './api'

// demo
// request({
//   url: '/demo/test',
//   method: 'get'
// })
// CSS
import './assets/style/reset.css'
import './assets/style/index.scss'

const app = createApp(App)

app.config.globalProperties.$request = request
app.config.globalProperties.$api = api
app.config.globalProperties.$storage = storage

app.directive('has', {
  beforeMount(el, binding) {
    const actionList = storage.getItem('actionList')
    const value = binding.value
    const hasPermission = actionList.includes(value)
    if (!hasPermission) {
      el.style.display = 'none'

      setTimeout(() => {
        el.parentNode.removeChild(el)
      })
    }
  }
})

app.use(ElementPlus, { size: 'small' })
app.use(router)
app.use(store)

app.mount('#app')
